<template>
  <div class="item-cart">
    <div class="product-item-cart">
      <div class="cart" @click.stop.prevent="addCart" v-show="good.quantity<=0">
        <img src="https://j-image.missfresh.cn/img_20170425134548759.png" class="image">
      </div>
      <div class="cart-action" v-show="good.quantity>0">
        <transition name="move">
          <span class="minus-action" @click.stop.prevent="cutCart"></span>
        </transition>
        <span class="count">{{carGoods[good.id]}}</span>
        <span class="add-action" @click.stop.prevent="updateCart"></span>
      </div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import Vue from 'vue'
  import store from '@/store/store'
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  import {
    CODE,
    APIURI
  } from '#/common/js/apiConst'
  import {
    Toast
  } from 'vant'
  export default {
    store,
    props: {
      id: {
        type: String
      },
      good: {
        type: Object,
        default () {
          return {
            quantity: 0,
            id: this.id
          }
        }
      }
    },
    computed: {
      ...mapState(['carGoods'])
    },
    mounted() {
      this.getCarCount()
    },
    methods: {
      ...mapMutations(['addGoods', 'delGoods', 'setGoods']),
      ...mapActions(['addsubCount', 'reducesubCount', 'setsubCount']),
      addCart(event) {
        if (!event._constructed) return

        this.$axios
          .get(APIURI + '/cart/add/' + this.good.id)
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              if (!this.good.quantity) {
                Vue.set(this.good, 'quantity', 1)
                this.addGoods(this.good)
              }
            } else {
              Toast(res.msg)
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      updateCart(event) {
        if (!event._constructed) return

        this.$axios
          .get(APIURI + '/cart/update/' + this.good.id)
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              this.good.quantity = this.carGoods[this.good.id]
              this.good.quantity++
              this.addGoods(this.good)
            } else {
              Toast(res.msg)
              event.target.classList.add('gray')
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      cutCart(event) {
        if (!event._constructed) return
        if (this.good.quantity > 1) {
          this.$axios
            .get(APIURI + '/cart/reduce/' + this.good.id)
            .then(res => {
              res = res.data
              if (res.code === CODE) {
                this.good.quantity--
                this.delGoods(this.good)
                event.target.parentNode.lastChild.classList.remove('gray')
              }
            })
            .catch(function(err) {
              console.log(err)
            })
        } else {
          this.$axios
            .get(APIURI + '/cart/del/' + this.good.id)
            .then(res => {
              res = res.data
              if (res.code === CODE) {
                this.good.quantity = 0
                this.delGoods(this.good)
              }
            })
            .catch(function(err) {
              console.log(err)
            })
        }
      },
      getCarCount() {
        let goodInfo = []
        this.$axios
          .get(APIURI + '/cart')
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              if (res.data) {
                this.good.quantity = 0
                goodInfo = res.data.list.filter(el => {
                  return el.id === Number(this.good.id)
                })
                if (goodInfo.length) {
                  for (let i = 0; i < goodInfo.length; i++) {
                    this.good.quantity = goodInfo[i].quantity
                  }
                }
              } else {
                this.good.quantity = 0
                this.setGoods({})
              }
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      changeCount() {
        this.good.quantity = this.carGoods[this.good.id]
      }
    },
    created() {
      if (this.carGoods[this.good.id]) {
        this.good.quantity = this.carGoods[this.good.id]
      } else {
        this.good.quantity = 0
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item-cart {
    position: absolute;
    right: 4%;
    bottom: 23px;
    z-index: 100;
    .cart {
      .image {
        width: 45px;
        display: block;
        -webkit-transform: translateY(18%);
        transform: translateY(18%);
      }
    }
    .cart-action {
      width: 5.625rem;
      position: absolute;
      right: 0;
      bottom: 0;
      padding-right: 0.5rem;
      text-align: right;
      .minus-action {
        background-image: url(https://static-as.missfresh.cn/frontend/img/reduce-img.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 1.375rem;
        height: 1.375rem;
        vertical-align: sub;
        display: inline-block;
        transform: rotate(0);
        transition: all 0.4s linear;
        &.move-enter-active,
        &.move-leave-active {
          opacity: 1;
          transform: translate3d(0, 0, 0);
          transition: all 0.4s linear;
        }
        &.move-enter,
        &.move-leave-to {
          opacity: 0;
          transform: translate3d(24px, 0, 0);
          transform: rotate(180deg);
        }
      }
      .count {
        font-size: 0.75rem;
        text-align: center;
        min-width: 1.5625rem;
        vertical-align: text-bottom;
        display: inline-block;
        line-height: 20.25px;
      }
      .add-action {
        background-image: url(https://static-as.missfresh.cn/frontend/img/add-img.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 1.375rem;
        height: 1.375rem;
        vertical-align: sub;
        display: inline-block;
        &.gray {
          -webkit-filter: grayscale(95%);
          -moz-filter: grayscale(95%);
          -ms-filter: grayscale(95%);
          -o-filter: grayscale(95%);
          filter: grayscale(95%);
          filter: gray;
        }
      }
    }
  }
</style>